$( () => {
    $("img.lazyload").lazyload();
})
$(() => {
    // let $timer_first = null;
    // let $timer_end = null;
    let limited_time_list_wrapper = $(".limited_time_list");
    let limited_time_goods_wrapper = $(".limited_time_goods ul");
    let discounts_goods_wrapper = $(".discounts_goods ul");
    let get_coupon_goods_wrapper = $(".get_coupon_goods ul");
    let recommended_list_goods_wrapper = $(".recommended_list_goods");
    let suning_live_list_wrapper = $(".suning_live_list");
    let group_buying_goods_wrapper = $(".group_buying_goods");
   

    // 限时秒杀部分
    let limited_time_list_options = {
        url: "../json/index_limited-time_seconds_kil.json"
    }
    $.ajax(limited_time_list_options)
        .then(res => {
            let timer = res.timer;
            let data = res.data;
            let limited_time_list = "";
            for (let attr in timer) {
                limited_time_list += ` <span class="matinee active">${timer[attr].page_time_start}</span>
                          <span class="evening">${timer[attr].page_time_end}</span>`
            }
            limited_time_list_wrapper.html(limited_time_list);
            let limited_time_goods_list = "";
            for (let attr in data) {
                limited_time_goods_list += ` <li>
                                                <div class="limited_time_goods_pic">
                                                    <img class="lazyload" data-original="${data[attr].img_url}" alt="">
                                                </div>
                                                <div class="limited_time_goods_name">
                                                    <span>${data[attr].shop_name}</span>
                                                </div>
                                                <div class="limited_time_goods_price">
                                                    <p class="new_price">
                                                        <i>￥</i>
                                                        <span>${data[attr].new_price}</span>
                                                    </p>
                                                    <p class="old_price">
                                                        <i>￥</i>
                                                        <span>${data[attr].old_price}</span>
                                                    </p>
                                                </div>
                                                <div class="limited_time_goods_state">
                                                    <span>${data[attr].states}</span>
                                                </div>
                                            </li>`
            }
            limited_time_goods_wrapper.html(limited_time_goods_list);
            $("img.lazyload").lazyload();
        })


    // 大聚惠部分
    let limited_time_goods_options = {
        url: "../json/index_big_poly.json"
    };
    $.ajax(limited_time_goods_options)
        .then(res => {
            let data = res.data;
            let discounts_goods_list = "";
            for (let attr in data) {
                discounts_goods_list += `<li>
                                        <div class="discounts_goods_pic">
                                            <img class="lazyload" data-original="${data[attr].img_url}" alt="">
                                        </div>
                                        <div class="discounts_goods_name">
                                            <span>${data[attr].shop_name}</span>
                                        </div>
                                        <div class="discounts_goods_price">
                                            <p class="price_img">
                                                <img class="lazyload" data-original="../img/discounts_goods_price_pic.png" alt="">
                                            </p>
                                            <p class="price_num">
                                                <i>￥</i>
                                                <span>${data[attr].price}</span>
                                            </p>
                                        </div>
                                        <div class="discounts_goods_sales">
                                            ${data[attr].sale_num}
                                        </div>
                                    </li>`
            }
            discounts_goods_wrapper.html(discounts_goods_list);
            $("img.lazyload").lazyload();
        })


    // 领券中心部分
    let get_coupon_goods_options = {
        url: "../json/index_coupon_redemption_centre.json"
    };
    $.ajax(get_coupon_goods_options)
        .then(res => {
            let data = res.data;
            let get_coupon_goods_list = "";
            for (let attr in data) {
                get_coupon_goods_list += `  <li>
                                                <div class="get_coupon_goods_pic">
                                                    <img class="lazyload" data-original="${data[attr].img_url}" alt="">
                                                    <p></p>
                                                </div>
                                                <div class="coupons_main">
                                                    <p class="condition">
                                                        <span>${data[attr].receive}</span>
                                                    </p>
                                                    <p class="store">
                                                        <span>${data[attr].merchants}</span>
                                                    </p>
                                                    <span class="get_btn">立即领取</span>
                                                </div>
                                            </li>`
            }
            get_coupon_goods_wrapper.html(get_coupon_goods_list);
            $("img.lazyload").lazyload();
        })


    // 推荐榜单部分
    let index_recommended_list_options = {
        url: "../json/index_recommended_list.json"
    }
    $.ajax(index_recommended_list_options)
        .then(res => {
            let data = res.data;
            let index_recommended_list = "";
            for (let attr in data) {
                index_recommended_list += ` <dl>
                                                <dt>
                                                    <img class="lazyload" src="${data[attr].img_url}" alt="">
                                                </dt>
                                                <dd class="recommended_list_goods_name">
                                                    <span>${data[attr].list_categories}</span>
                                                </dd>
                                                <dd class="recommended_list_goods_heat">
                                                    <p>
                                                        <img class="lazyload" data-original="../img/recommended_list_goods_heat_icon.png" alt="">
                                                    </p>
                                                    <span>${data[attr].sale_num}</span>
                                                </dd>
                                            </dl>`
            }
            recommended_list_goods_wrapper.html(index_recommended_list);
            $("img.lazyload").lazyload();
        })

    // 苏宁直播部分
    let index_live_list_options = {
        url: "../json/index_suning_live.json"
    }
    $.ajax(index_live_list_options)
        .then(res => {
            let index_live_list = "";
            let data = res.data;
            for (let attr in data) {
                index_live_list += `<div class="live_pic">
                                        <img class="lazyload" src="${data[attr].img_url}" alt="">
                                        <p>${data[attr].live_title}</p>
                                        <i class="dynamic">
                                            <img class="lazyload" data-original="../img/live.gif" alt="">
                                        </i>
                                        <div class="mask">
                                            <img class="lazyload" data-original="../img/live_mask.png" alt="">
                                            <span>手机苏宁扫一扫</span>
                                        </div>
                                    </div>`
            }
            suning_live_list_wrapper.html(index_live_list);
            $("img.lazyload").lazyload();
        })

    // 苏宁拼购
    let group_buying_goods_options = {
        url: "../json/index_spell_it_for.json"
    }
    $.ajax(group_buying_goods_options)
        .then(res => {
            let group_buying_goods = "";
            let data = res.data;
            for (let attr in data) {
                group_buying_goods += ` <dl>
                                            <dt class="group_buying_pic">
                                                <img class="lazyload" src="${data[attr].img_url}" alt="">
                                            </dt>
                                            <dd class="group_buying_msg">
                                                <p class="price">
                                                    <i>￥</i>
                                                    <span>${data[attr].price}</span>
                                                </p>
                                                <p class="sold">
                                                    已拼<span>${data[attr].num}</span>件
                                                </p>
                                            </dd>
                                            <dd class="mask">
                                                <img class="lazyload" data-original="../img/group_buying_mask.png" alt="">
                                                <span>手机苏宁扫一扫</span>
                                            </dd>
                                        </dl>`
            }
            group_buying_goods_wrapper.html(group_buying_goods);
            $("img.lazyload").lazyload();
        })

    
    // 楼梯特效
    let $stairs = $(".stairs_block");
    let staits_list = [];
    let animate = false;

    for (let i = 0; i < $stairs.length; i++) {
        let _top = $stairs.eq(i).offset().top;
        staits_list.push(parseInt(_top));
    }

    let $stairs_btn = $(".fix_stairs .stairs li");
    $stairs_btn.click(function () {
        if (animate) {
            return false;
        }
        animate = true;
        let index = $stairs_btn.index($(this));
        $("html,body")
            .stop(true)
            .animate({
                scrollTop: staits_list[index] + 2
            }, function () {
                animate = false;
            })

        $(this)
            .addClass("active")
            .siblings("li")
            .removeClass("active");
    });

    $(window).scroll(function () {
        let scrollTop = $("body,html").scrollTop();
        let index = getStairsIndex(scrollTop);
        $stairs_btn
            .eq(index)
            .addClass("active")
            .siblings("li")
            .removeClass("active")
    });

    function getStairsIndex(scrollTop) {
        // console.log(staits_list[staits_list.length - 1]);
        if (scrollTop >= staits_list[staits_list.length - 1]) {
            return staits_list.length - 1;
        }
        for (let i = 0; i < staits_list.length; i++) {
            if (scrollTop >= staits_list[i] && scrollTop < staits_list[i + 1]) {
                return i;
            }
        }
    }


    // 返回顶部
    $(".go_top").click(function () {
        $("body,html").animate({
            scrollTop: 0
        }, 1000);
    });

    // 进入详情页
    $(".discounts_more").click( () => {
        open("../html/list_of_page.html")
    })
 

    function indexCountDown(){
        var target = new Date("2021/6/2");
        var r = target.getTime() - Date.now();

        var hours = parseInt( r / 1000 / 3600 % 24);
        var minutes = parseInt( r / 1000 / 60 % 60);
        var seconds = parseInt( r / 1000 % 60);

        if(hours < 10){
            hours = "0" + hours;
        }else{
            hours = hours;
        }

        if(minutes < 10){
            minutes = "0" + minutes;
        }else{
            minutes =  minutes;
        }

        if(seconds < 10){
            seconds = "0" + seconds ;
        }else{
            seconds =  seconds;
        }

        $(".time_hour").text(hours);
        $(".time_minute").text(minutes);
        $(".time_second").text(seconds);

    }

    let t1 = setInterval( indexCountDown , 1000 );
    indexCountDown();




    


})